import { Outlet, history } from '@umijs/max';
import { Button, Menu, message, Space } from 'antd';
import styles from './index.less';
import { items } from './const';

message.config({
  top: 100,
  maxCount: 3
});
// 负责子应用路由出口
export default function Layouts(): JSX.Element {
  const isLogin = localStorage.getItem('isLogin') === 'true'
  const userInfo = JSON.parse(localStorage.getItem('userInfo'))
  const loginOut = () => {
    localStorage.removeItem('isLogin')
    localStorage.removeItem('userInfo')
    localStorage.removeItem('token')
    window.location.reload()
  }
  return (
    <>
      <div className={styles.top}>
        {
          !isLogin ? 
        <Space size={10}>
          <Button color="primary" variant="link" onClick={() => {
            history.push('/login')
          }}>登陆</Button>
          <Button color="default" variant="link" onClick={() => {
            history.push('/login/true')
          }}>注册</Button>
        </Space> : 
        <div className={styles.ava}>
            <img src={userInfo?.avatarUrl || ''} style={{width: 40, height: 40, borderRadius: '50%'}} />
            <div className={styles.name}>{userInfo?.name || ''}</div>
            <Button onClick={loginOut} color="default" variant="link">退出</Button>
        </div>
        }
        <div>
          <Menu mode="horizontal" items={items} />
        </div>
      </div>
      <div style={{ minWidth: '1800px' }}>
        <Outlet />
      </div>
    </>
  );
}
